<!--
 * @Description: 桌面端登录
 * @Author: seadon
 * @LastEditors: zhaoxiaoyang zhaoxiaoyang@byteluck.com
 * @Date: 2021-07-12 11:31:28
 * @LastEditTime: 2024-05-08 16:26:12
-->
<template>
	<div class="desktop-login">
		<div class="desktop-login-lang">
			<a-dropdown trigger="click" placement="bottomRight">
				<span class="lang-active" @click.prevent>
					<i class="low-code iconsupplier_web_normal lang-icon"></i>
					{{ currentValue.name }}
					<i class="low-code iconxiangyou1 lang-icon"></i>
				</span>
				<template #overlay>
					<div class="lang-list">
						<span
							v-for="(lang, index) in language"
							:key="index"
							class="lang-list-item"
							:class="{ active: lang.value === currentValue.value }"
							@click="changeLocale(lang)"
							>{{ lang.name }}</span
						>
					</div>
				</template>
			</a-dropdown>
		</div>
		<div v-show="pageType === 'register'" class="go-back" @click="goBack">
			返回登陆
		</div>
		<div class="desktop-login-logo" :style="{ background: '#fff' }">
			<div class="logo-box">
				<img v-if="logoUrl" :src="logoUrl" />
			</div>
			<div class="logo-title" v-if="!hasOutsideOrg">登录</div>
			<div class="logo-text" v-if="hasOutsideOrg">
				<span
					class="inside"
					:class="{ active: loginType === 'inside' }"
					@click="changeType('inside')"
					>{{ pageType === 'login' ? t.InternalLogin : '用户注册' }}</span
				>
				<span
					class="outside"
					:class="{ active: loginType === 'outside' }"
					@click="changeType('outside')"
					>{{ pageType === 'login' ? t.ExternalLogin : '组织注册' }}</span
				>
			</div>
		</div>
		<div v-show="pageType === 'login'">
			<div v-show="loginType === 'inside'">
				<a-form
					:model="insideUserInfo"
					layout="vertical"
					class="desktop-login-info"
				>
					<a-form-item :label="t.account">
						<a-input
							v-model:value="insideUserInfo.account"
							autocomplete="off"
							:placeholder="t.insideAccountNumber"
							@change="handleRememberInsideAccount"
							@press-enter="handleEnterAccount"
						></a-input>
					</a-form-item>
					<a-form-item :label="t.password" class="info-password">
						<a-input-password
							ref="insidePasswordRef"
							v-model:value="insideUserInfo.password"
							autocomplete="off"
							:placeholder="t.inputPassword"
							@press-enter="handleEnterPassword"
						></a-input-password>
					</a-form-item>
					<a-form-item
						v-if="isShowCaptcha"
						:label="t.captcha"
						class="info-password"
					>
						<div style="position: relative">
							<a-input
								ref="captchaRef"
								v-model:value="insideUserInfo.captcha"
								autocomplete="off"
								:placeholder="t.inputCaptcha"
								style="width: 160px"
								@press-enter="handleEnterCaptcha"
							/>
							<img
								style="
									position: absolute;
									right: 0;
									bottom: 0;
									width: 160px;
									height: 40px;
									margin-left: 10px;
									cursor: pointer;
								"
								alt="图形验证码"
								:src="
									path.getFullPath(
										'/ego_base_info/v1/public/pwd/captcha?uuid=' + uuid
									)
								"
								@click="handleChangeCaptcha"
							/>
						</div>
					</a-form-item>
					<a-checkbox
						v-model:checked="insideRememberAccount"
						class="info-account"
						@change="insideCheckChange"
						>{{ t.rememberNumber }}</a-checkbox
					>
					<div type="primary" class="info-button" @click="insideLogin">
						{{ t.signIn }}
					</div>
				</a-form>
				<template v-if="isShowIm">
					<div class="desktop-login-mode">
						<p class="mode-line"></p>
						<p class="mode-text">{{ t.otherLogin }}</p>
						<p class="mode-line"></p>
					</div>
					<div class="mode-icon">
						<div v-for="(item, index) in imAll" :key="index">
							<div
								v-if="item.type === imType"
								class="mode-icon-box"
								@click="onMode(item.type)"
							>
								<a-tooltip placement="top">
									<template #title>
										<span>{{ item.name }}</span>
									</template>
									<img
										:src="
											imType === '20'
												? item.imgName
												: path.getFullPath(`/images/${item.imgName}`)
										"
									/>
								</a-tooltip>
							</div>
						</div>
					</div>
					<div class="mode-tip">
						<span>{{ t.unifiedAuthentication }}</span>
					</div>
				</template>
			</div>
			<div v-show="loginType === 'outside'">
				<a-form
					:model="outsideUserInfo"
					layout="vertical"
					class="desktop-login-info outside-info"
				>
					<a-form-item :label="t.account">
						<a-input
							v-model:value="outsideUserInfo.account"
							autocomplete="off"
							:placeholder="t.outsideAccountNumber"
							@change="handleRememberOutsideAccount"
							@press-enter="handleEnterAccount"
						></a-input>
					</a-form-item>
					<a-form-item :label="t.password" class="info-password">
						<a-input-password
							ref="outsidePasswordRef"
							v-model:value="outsideUserInfo.password"
							autocomplete="off"
							:placeholder="t.inputPassword"
							@press-enter="handleOusideEnterPassword"
						></a-input-password>
					</a-form-item>
					<a-checkbox
						v-model:checked="outsideRememberAccount"
						class="info-account"
						@change="outsideCheckChange"
						>{{ t.rememberNumber }}</a-checkbox
					>
					<div type="primary" class="info-button" @click="outsideLogin">
						{{ t.signIn }}
					</div>
					<div class="register-button" @click="register" v-if="hasRegister">
						{{ t.register }}
					</div>
				</a-form>
			</div>
		</div>
		<div v-show="pageType === 'register'" style="padding: 30px 64px 21px">
			<p class="register-type-title">
				请选择注册的{{ loginType === 'inside' ? '用户' : '组织' }}类型
			</p>
			<ul class="register-list" v-show="loginType === 'inside'">
				<li
					v-for="item in store.state.outsideOrgRegisterListDeptList"
					@click="jumpToRegister(item, 'user')"
				>
					{{ item.dept_type_name }}(用户)
				</li>
			</ul>
			<ul class="register-list" v-show="loginType === 'outside'">
				<li
					v-for="item in store.state.outsideOrgRegisterListDeptTypeList"
					@click="jumpToRegister(item, 'dept')"
				>
					{{ item.dept_type_name }}(组织)
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, unref, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import { t } from '@/constant/login'
import moment from 'moment'
import './index.less'
import { path } from '@/utils'
import { message } from 'ant-design-vue'
const emit = defineEmits(['mode', 'insideLogin', 'outsideLogin'])
const store = useStore()
defineProps<{
	isShowIm: boolean
	imType: string
	logoUrl: string
	locale?: string
	hasRegister: boolean
}>()
const language = computed(
	() =>
		store.state.tenant?.language_list?.filter((item: any) => item.has_show) ??
		[]
)
const isShowCaptcha = computed(
	() => store.state.tenant?.security_config_map?.identify_code !== false
)

const insideRememberAccount = ref(false)
const outsideRememberAccount = ref(false)
const currentValue = reactive({
	name: '中文',
	value: 'zh-CN',
})
const isShowLang = ref(false)

const changeLocale = (lang: any) => {
	currentValue.name = lang.name
	currentValue.value = lang.value
	isShowLang.value = false
	localStorage.setItem('locale', lang.value)
	location.reload()
}

const insideUserInfo = reactive({
	account: '',
	password: '',
	captcha: '',
	captcha_id: '',
})
const outsideUserInfo = reactive({
	account: '',
	password: '',
})

const captchaRef: any = ref()
// 是否开启外部组织登录
const hasOutsideOrg: any = computed(
	() => store.state.tenant?.tenant_auth?.external_org
)
// 页面类型
const pageType: any = ref('login')
// 登录类型
const loginType: any = ref('inside')
//切换登录登录组织
const changeType = (type: string) => {
	loginType.value = type
}
// 其他登录方式
const onMode = (type: string) => {
	emit('mode', type)
}
// 账号回车事件,
const insidePasswordRef: any = ref('')
const outsidePasswordRef: any = ref('')
const handleEnterAccount = () => {
	insidePasswordRef.value.focus()
	outsidePasswordRef.value.focus()
}

const uuid = ref('')
const handleChangeCaptcha = () => {
	insideUserInfo.captcha_id = uuid.value = String(Math.random())
}
const insideLogin = async () => {
	if (!insideUserInfo.account || !insideUserInfo.password) {
		message.error(t.passwordCannotEmpty)
		return
	} else if (isShowCaptcha.value && !insideUserInfo.captcha) {
		message.error(t.inputCaptcha)
		return
	}
	emit('insideLogin', insideUserInfo, 'pc', currentValue.value, () => {
		handleChangeCaptcha()
		insideUserInfo.captcha = ''
	})
}
const outsideLogin = () => {
	if (!outsideUserInfo.account || !outsideUserInfo.password) {
		message.error(t.passwordCannotEmpty)
		return
	}
	emit(
		'outsideLogin',
		outsideUserInfo.account.trim(),
		outsideUserInfo.password.trim(),
		currentValue.value
	)
}
const register = () => {
	pageType.value = 'register'
	loginType.value = 'inside'
}
const jumpToRegister = (detail: any, type: any) => {
	window.open(`${detail[`register_${type}_url`]}?query=${detail.dept_type_uid}`)
}
const goBack = () => {
	pageType.value = 'login'
	loginType.value = 'inside'
}
// 密码回车事件
const handleEnterPassword = () => {
	if (isShowCaptcha.value) {
		captchaRef.value.focus()
	} else {
		insideLogin()
	}
}
// 外部组织密码回车事件
const handleOusideEnterPassword = () => {
	outsideLogin()
}

// 记住账号
const insideCheckChange = () => {
	const accountObj: any = {
		account: insideUserInfo.account,
		date: new Date(),
	}
	const accountString = JSON.stringify(accountObj)
	if (unref(insideRememberAccount)) {
		localStorage.setItem('insideAccountNumber', accountString)
	} else {
		localStorage.removeItem('insideAccountNumber')
	}
}
const outsideCheckChange = () => {
	const accountObj: any = {
		account: outsideUserInfo.account,
		date: new Date(),
	}
	const accountString = JSON.stringify(accountObj)
	if (unref(outsideRememberAccount)) {
		localStorage.setItem('outsideAccountNumber', accountString)
	} else {
		localStorage.removeItem('outsideAccountNumber')
	}
}

// 记住账号change事件
const handleRememberInsideAccount = () => {
	insideCheckChange()
}
const handleRememberOutsideAccount = () => {
	outsideCheckChange()
}

handleChangeCaptcha()
const handleEnterCaptcha = () => {
	insideLogin()
}

onMounted(() => {
	// 语言设置
	if (localStorage.getItem('locale')) {
		currentValue.value = localStorage.getItem('locale') || 'zh-CN'
		const currentName = unref(language)?.filter((item: any) => {
			return item.value === currentValue.value
		})
		currentValue.name = currentName[0].name
	} else {
		localStorage.setItem('locale', currentValue.value)
	}

	const insideAccountNumber: any = localStorage.insideAccountNumber || ''
	if (insideAccountNumber) {
		const accountObj: any = JSON.parse(insideAccountNumber)
		if (moment(new Date()).diff(accountObj.date, 'day') >= 7) {
			localStorage.removeItem('insideAccountNumber')
		} else {
			insideUserInfo.account = accountObj.account
			insideRememberAccount.value = true
		}
	}
	const outsideAccountNumber: any = localStorage.outsideAccountNumber || ''
	if (outsideAccountNumber) {
		const accountObj: any = JSON.parse(outsideAccountNumber)
		if (moment(new Date()).diff(accountObj.date, 'day') >= 7) {
			localStorage.removeItem('outsideAccountNumber')
		} else {
			outsideUserInfo.account = accountObj.account
			outsideRememberAccount.value = true
		}
	}
})
const imAll = ref()
watch(
	() => store.state.imAll,
	value => {
		imAll.value = value
	},
	{
		deep: true,
		immediate: true,
	}
)
</script>
